<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>fetch</title>
  <!-- react核心库 -->
  <script src="../js/react.development.js"></script>
  <!-- react扩展库支持react操作DOM -->
  <script src="../js/react-dom.development.js"></script>
  <!-- 1.ES6转ES5；2.jsx转js -->
  <script src="../js/babel.min.js"></script>
  <!-- prop操作 -->
  <script src="../js/prop-types.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    button {
      background-color: red;
      color: #fff;
      outline: none;
      border: none;
      cursor: pointer;
      padding: 5px 10px;
      border-radius: 5px;
    }

    .app {
      width: 500px;
      overflow: hidden;
      margin: 50px auto;
      box-sizing: border-box;
      border: 1px solid #ddd;
    }

    .app h2 {
      line-height: 40px;
      color: #03ccbb;
      text-align: center;
      border-bottom: 1px solid #ddd;
    }

    .header {
      width: 100%;
      height: 50px;
      box-sizing: border-box;
      padding: 5px 10px;
      border-bottom: 1px solid #ddd;
    }

    .header input {
      height: 30px;
      width: 100%;
    }

    .list {
      width: 100%;
      height: 300px;
      overflow-x: hidden;
      overflow-y: auto;
      border-bottom: 1px solid #ddd;
    }

    .item {
      width: 100%;
      height: 40px;
      line-height: 40px;
      box-sizing: border-box;
      padding: 0 10px;
      border-bottom: 1px dashed #aaa;
    }

    .item input {
      margin-right: 5px;
    }

    .item button {
      float: right;
      margin-top: 5px;
    }

    .item span {
      font-size: 18px;
    }

    .footer {
      height: 50px;
      box-sizing: border-box;
      padding: 0 10px;
      line-height: 50px;
    }

    .footer button {
      float: right;
      margin-top: 10px;
    }

    .footer span {
      margin-left: 5px;
    }
  </style>
</head>

<body>
  <div id="test"></div>
  <script type="text/babel">
    // Header组件
    class Header extends React.Component {
      addThing = async (event) => {
        if (event.target.value.trim() == '' || event.keyCode !== 13) return
        // 发送网络请求——使用fetch发送
        fetch(`/api/search?q=${event.target.value}`).then(
          response=>{
            console.log('联系服务器成功')
            return response.json()
          },
          error=>{
            console.log('联系服务器失败了',error)
          }
        ).then(
          response=>{console.log('获取数据成功',response)},
          error=>{console.log('获取数据失败',error)}
        )
        // fetch请求优化
        fetch(`/api/search?q=${event.target.value}`).then(
          response=>{
            console.log('联系服务器成功')
            return response.json()
          }
        ).then(
          response=>{console.log('获取数据成功',response)},
        ).catch(
          error=>{console.log(error)}
        )
        // fetch进一步优化
        try {
          const response = await fetch(`/api/search?q=${event.target.value}`)
          const data = await response.json()
          console.log(data)
        } catch (error) {
          console.log('请求出错',error)
        }
        // fetch over
        event.target.value = ''
      }
      render() {
        return (
          <div className='header'>
            <input type="text" placeholder='请输入待办事项，回车录入列表' onKeyUp={this.addThing} />
          </div>
        )
      }
    }

    // 渲染到页面
    ReactDOM.render(<Header />, document.getElementById('test'))
  </script>
</body>

</html>